<template>
  <div id="task-management">
    <div class="task-box">
      <div class="two-search">
        <div class="search-item">
          <div>选择机构</div>
          <el-select
            v-model="institutionSelect"
            placeholder="选择机构"
            style="width: 240px"
            size="large"
          >
            <el-option
              v-for="item in institutionOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>

        <div class="search-item">
          <div>选择部门</div>
          <el-select
            v-model="departmentSelect"
            placeholder="选择部门"
            style="width: 240px"
            size="large"
          >
            <el-option
              v-for="item in departmentOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="search-item">
          <el-input
            v-model="form.word"
            clearable
            style="width: 240px"
            placeholder="输入关键字"
          />
          <div class="all-btn" @click="search">搜索</div>
        </div>
      </div>
    </div>
    <div class="task-list">
      <div @click="$router.push('TaskDetails')">
        <div>
          <img src="@/assets/img/TaskManagement/test.png" alt="" />
        </div>
        <div class="task-right">
          <div class="task-title">财富增长实验室小组</div>
          <div class="task-info">
            <div>负责人：李明</div>
            <div>人数：50人</div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <img src="@/assets/img/TaskManagement/test.png" alt="" />
        </div>
        <div class="task-right">
          <div class="task-title">财富增长实验室小组</div>
          <div class="task-info">
            <div>负责人：李明</div>
            <div>人数：50人</div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <img src="@/assets/img/TaskManagement/test.png" alt="" />
        </div>
        <div class="task-right">
          <div class="task-title">财富增长实验室小组</div>
          <div class="task-info">
            <div>负责人：李明</div>
            <div>人数：50人</div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <img src="@/assets/img/TaskManagement/test.png" alt="" />
        </div>
        <div class="task-right">
          <div class="task-title">财富增长实验室小组</div>
          <div class="task-info">
            <div>负责人：李明</div>
            <div>人数：50人</div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <img src="@/assets/img/TaskManagement/test.png" alt="" />
        </div>
        <div class="task-right">
          <div class="task-title">财富增长实验室小组</div>
          <div class="task-info">
            <div>负责人：李明</div>
            <div>人数：50人</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="isShowAI"
      :close-on-click-modal="false"
      width="80%"
      align-center
      :before-close="handleClose"
    >
      <div class="my-dialog">
        <div v-if="isShowAI" class="my-dialog-content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isShowAI: false,
      loading: false,
      total: 1000,
      form: {},
      institutionOptions: [
        {
          id: 1,
          name: "机构1",
        },
        {
          id: 2,
          name: "机构2",
        },
        {
          id: 3,
          name: "机构3",
        },
      ],
      institutionSelect: "",
      departmentOptions: [
        {
          id: 1,
          name: "部门1",
        },
        {
          id: 2,
          name: "部门2",
        },
        {
          id: 3,
          name: "部门3",
        },
      ],
      departmentSelect: "",
    };
  },
  created() {},
  methods: {
    handleDetail(row) {
      this.conversationId = row.id;
      this.isShowAI = true;
    },
    handleClose() {
      this.isShowAI = false;
    },
    search() {},
  },
};
</script>
<style lang="scss" scoped>
#task-management {
  width: 1200px;
  margin: 0 auto;

  .task-box {
    .all-box {
      padding: 38px 52px;
    }

    .two-search {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-bottom: 34px;

      .search-item {
        display: flex;
        align-items: center;
        gap: 15px;
      }

      :deep(.el-input__inner) {
        height: 40px;
      }

      .all-btn {
        height: 36px;
        line-height: 36px;
      }
    }

    .el-table {
      margin-bottom: 20px;

      :deep(th) {
        color: #7a8cb0;
      }

      .table-btns {
        display: flex;
        gap: 20px;

        > div {
          cursor: pointer;
          color: #457aff;

          &:hover {
            color: #2657b8;
          }
        }
      }
    }
  }

  .task-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    > div {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      width: 390px;
      height: 120px;
      background: #ffffff;
      box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.08);
      border-radius: 20px;
      padding: 0 14px;
      box-sizing: border-box;
      cursor: pointer;
      transition: 0.3s;

      &:hover {
        transform: scale(1.02);
      }

      .task-right {
        flex: 1;

        .task-title {
          font-weight: bold;
          font-size: 20px;
          color: #374151;
          margin-bottom: 18px;
        }

        .task-info {
          display: flex;
          font-size: 16px;
          color: #727985;

          > div {
            &:first-child {
              margin-right: 40px;
            }
          }
        }
      }
    }
  }

  :deep(.el-dialog) {
    background: none;
    box-shadow: none;

    .my-dialog {
      padding: 10px 0;
    }

    .my-dialog-content {
      height: 80vh;

      iframe {
        height: 100%;
      }
    }

    .el-dialog__close {
      color: #333;
      background: #aaabad;
      border-radius: 50%;
      padding: 2px;
    }
  }
}
</style>
